<template>
  <!-- 文件右键菜单 -->
  <div class="file-rightmenu">
    <div class="menu-item" @click="handleDownload">下载</div>
    <a-popconfirm @confirm="handleShare">
      <a-icon slot="icon" type="heart"></a-icon>
      <a-select
        slot="title"
        placeholder="未选择"
        size="small"
        v-model="shareUserName"
      >
        <a-select-option value="">暂未选择</a-select-option>
        <a-select-option
          v-for="(item, index) in focusUserList"
          :key="index"
          :value="item.userName"
          >{{ item.nickName }}
        </a-select-option>
      </a-select>
      <div class="menu-item" @click.stop="() => {}">分享</div>
    </a-popconfirm>
    <div class="menu-item" @click="handleCollect">收藏</div>
    <div class="menu-item" @click="handleCopy">复制</div>
    <div class="menu-item" @click="handleCut">剪切</div>
    <div class="menu-item" @click.stop="handleDelete">删除</div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    parentId: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      shareUserName: ''
    }
  },
  computed: {
    ...mapState(['focusUserList'])
  },
  methods: {
    handleDownload() {
      this.$api.files.downloadFile(this.id).then((res) => {
        window.open(res.data, '_blank')
      })
    },
    handleShare() {
      if (this.shareUserName.trim() !== '') {
        this.$api.files.shareFile(this.shareUserName, this.id).then((res) => {
          this.$message.success('分享成功')
        })
      }
    },
    handleCollect() {
      this.$api.files.collectFile(this.id).then((res) => {
        this.$message.success('收藏成功')
      })
    },
    handleCopy() {
      this.$store.commit('setClipBoard', {
        type: 'copy',
        fileId: this.id,
        parentId: this.parentId
      })
      this.$message.info('已复制到粘贴板')
    },
    handleCut() {
      this.$store.commit('setClipBoard', {
        type: 'cut',
        fileId: this.id,
        parentId: this.parentId
      })
      this.$message.info('已剪切到粘贴板')
    },
    handleDelete() {
      this.$api.files.deleteFile(this.id).then((res) => {
        this.$message.success('已放入回收站')
        this.$emit('delete')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.file-rightmenu {
  .menu-item {
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-bottom: 1px dotted #ccc;
    transition: background 0.5s;
    user-select: none;
    &:hover {
      background-color: fade(@primary-color, 10%);
    }
  }
}
</style>
